<template>
  <div class="panel">
    <div class="panel-header">
      <Form ref="formInline" inline>
        <FormItem>
          <Input type="text" placeholder="请输入部门">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary">查询</Button>
        </FormItem>
      </Form>
    </div>
    <div class="panel-body">
      <div class="panel-toolbar">
        <Button type="primary">新增</Button>
        <Button type="primary">删除</Button>
      </div>
      <Table border ref="selection" :columns="columns" :data="page.rows"></Table>
    </div>
    <div class="panel-footer">
      <Page :total="page.total" :current="page.current"></Page>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { rendered } from '@/api'

export default {
  data () {
    let _columns = [
      { type: 'selection', width: 50, align: 'center' },
      { type: 'index', width: 50, align: 'center' },
      { key: 'name', title: '部门', align: 'center' },
      { key: 'director', title: '负责人', align: 'center' },
      { key: 'employees', title: '员工数', align: 'right', renderHeader: rendered.center }
    ]
    return {
      page: {
        current: 1,
        total: 10,
        rows: []
      },
      columns: _columns
    }
  },
  mounted () {
    this.setData()
  },
  methods: {
    setData () {
      let _this = this
      axios.get('depts').then(function (res) {
        _this.page.rows = res.data
      }).catch(function (err) {
        console.log(err)
      })
    }
  }
}
</script>
